import React from 'react'
import {inject, observer} from 'mobx-react';
import {Flex,Bubble,Tools} from 'weaver-mobile';
import { withRouter } from 'react-router-dom';
import {toJS} from 'mobx';
import {openSystemApp} from '../../util/pulic-func'
import {getEquipment} from '../../util/common';

@withRouter
@inject ('applicationStore')
@observer
class Application extends React.Component {
    constructor(props){
        super(props);
        this.equipment = getEquipment();
    }

    static defaultProps = {
        prefixCls:"fna-application"
    }    

    componentDidMount() {
        const {applicationStore} = this.props;
        const {getThreePartiesAll} = applicationStore;
        getThreePartiesAll();
    }

    render() {
        const {prefixCls,applicationStore} = this.props;
        const {datas} = applicationStore;

        return (
            <div className={`${prefixCls}`}>
                <Flex className={`fna-flex-icon fna-flex-icon-04`}>
                    {datas.length > 0 && datas[0].plateFnList.map( item => {
                        let bool,comment = [];
                        if(this.equipment.isWx === '' && !this.equipment.isDT){
                            bool = true;
                        }else{
                            bool = item.threeApp ? false : true;
                        }

                        if(bool){
                            comment = (
                                <Flex.Item className={`fna-flex-icon-item`} key={item.key} style={item.itemStyle} onClick={()=>{this.downApplication(item.key)}}>
                                    <div className={`fna-flex-icon-item-icon`} style={item.item_icon_style}>
                                        <img src={`${item.picturePath}`} width="30" height="30" style={{borderRadius: '5px'}}/>
                                    </div>
                                    <div className={`fna-flex-icon-item-text`} style={item.item_text_style}>{item.title}</div>
                                </Flex.Item>
                            )
                        }
                        return comment
                    })}
                </Flex>
            </div>
        )
    }

    downApplication = (key) =>{
        const {applicationStore,history} = this.props;
        const {docid,imagefileid} = applicationStore;

        if(key == 'billingAssistant'){
            history.push('/invoiceAssistant');
        }else if(key == 'didiChuxing' || key == 'travelBooking' || key == 'highIronPipe' || key == 'aliNailed'){
            openSystemApp(key);
        }else if(key == 'travelSchedule'){ //差旅日程 
            window.location.href='/spa/workplan/static4mobile/#/calendar/myCalendar'
        }else{  //规章制度
            {docid ? window.open(`/spa/document/static4mobile/index.html#/systemDoc/doc/${docid}/attachst/iframe/${imagefileid}`) : Bubble.remind('暂无文档')}
            // http://192.168.7.224:8082/spa/document/static4mobile/index.html#/add/menuIds=2,16
            // window.location.href=`/spa/document/static4mobile/index.html#/doc/${linkid}`

        }
    }
}

export default Application;